<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
    </el-form>
    <el-table
      :data="
        tableData.slice((currentPage3 - 1) * pagesize, currentPage3 * pagesize)
      "
      style="width: 100"
    >
      <el-table-column label="头像" width="150">
        <template slot-scope="scope">
          <el-avatar shape="square" :src="scope.row.header"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column label="name" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="玩家ID" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.playerID }}</span>
        </template>
      </el-table-column>
      <el-table-column label="队伍ID" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.teamID }}</span>
        </template>
      </el-table-column>
      <el-table-column label="排行" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.rank }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleupdate(scope.$index)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="handleout(scope.row, scope.row.playerID)"
            >踢出</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="fondMessage(scope.row.playerID)"
            >个人纪录</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="个人记录" :visible.sync="dialogFormMessage" width="30%">
        <el-table :data="messagelist">
          <el-table-column property="date" label="关卡" width="150"></el-table-column>
          <el-table-column property="name" label="得分" width="200"></el-table-column>
          <el-table-column property="address" label="星数"></el-table-column>
       </el-table>
    </el-dialog>
    <el-dialog title="修改" :visible.sync="dialogFormVisiblea" width="20%">
      <el-form
        ref="form"
        :model="form"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="头像" :label-width="formLabelWidth">
          <p>
            <img v-if="image" @click="goFile" :src="image" class="avatar" />
            <i v-else @click="goFile" class="el-icon-plus avatar-uploader-icon"></i>
            <input
            v-show="false"
              type="file"
              id="fileInput"
              ref="clearFile"
              @change="fileInput($event)"
              accept="image/png,image/jpeg"
            />
          </p>
          
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门" :label-width="formLabelWidth">
          <el-input v-model="form.dept" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机" :label-width="formLabelWidth">
          <el-input v-model="form.slogan" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="onSubmits"
            >修改</el-button
          >
          <el-button size="mini" @click="Cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="pages" v-if="tableData != ''">
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="pagesize"
          layout="prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script src="./obs test_files/jquery-1.12.1.min.js.下载"></script>
<script src="./obs test_files/axios.min.js.下载"></script>
<script src="./obs test_files/clipboard.min.js.下载"></script>
<script>
import { mapGetters } from "vuex";
import Method from "@/utils/proto";
import { posts } from "@/api/api";
import axios from "axios";
import Error from '@/utils/error'

export default {
  data() {
    return {
      messagelist:[],
      image: "",
      tableData: [],
      formInline: {
        code: "",
      },
      currentPage3: 1,
      pagesize: 15,
      total: 100,
      form: {
        method: Method.Method.MSG_AGENT_ACT_CHANGE_PLAYER,
        token: this.$store.getters.token,
        name: "",
        carton: "",
        playerID: "",
        dept: "",
        slogan: "",
      },
      dialogFormVisiblea: false,
      dialogFormMessage: false,
      formLabelWidth: "120px",
    };
  },
  methods: {
    fondMessage(id){
       this.dialogFormMessage = true
       console.log(id);
      let data = {
        method: Method.Method.MSG_AGENT_ACT_PLAYER_SINGLERECORD,
        token: this.$store.getters.token,
        code: this.formInline.code,
        playerId:id
      };
      console.log(data);
      posts(data).then((res) => {
        console.log(res,'1');
        if(res.result!=0){
           this.$message({
            type: 'error',
            message: Error.getErrorMessage(res.result),
          });
          return
        }
          
        })
        .catch();
    },
    handleCurrentChange(val) {
      this.currentPage3 = val;
    },
    goFile(){this.$refs.clearFile.click()},
    fileInput(e) {
      var fileObj = e.target.files[0];
      console.log("fileObj:", fileObj.name);
      if (fileObj.type != "image/png" && fileObj.type != "image/jpeg") {
        alert("请上传正确的文件类型");
        return;
      }
      let data = {
        method: Method.Method.MSG_UTLITY_OBS_SIGNE,
        token: this.$store.getters.token,
        key: fileObj.name,
        type: fileObj.type,
      };
      posts(data)
        .then((res) => {
          const obsdata = {
            method: "PUT",
            url: res.SignedUrl,
            headers: {
              "Content-Type": fileObj.type,
            },
            data: fileObj,
          };
          axios(obsdata)
            .then((resd) => {
              if (resd.status == 200) {
                const image = "https://qres.youmengv.com/" + fileObj.name;
                this.image = image;
              }
            })
            .catch();
        })
        .catch();
    },

    handleupdate(index) {
      let roles = this.$store.getters.roles
       if(roles==10000000){
         console.log(this.$store.getters.roles);
         this.$message({
           type:'warning',
           message:'没有权限执行此操作'
         })
         return
       }
      this.dialogFormVisiblea = true;
      this.form.playerID = this.tableData[index].playerID;
      this.form.name = this.tableData[index].name;
      this.form.carton = this.tableData[index].carton;
      this.image = this.tableData[index].carton;
      this.form.dept = this.tableData[index].dept;
      this.form.slogan = this.tableData[index].slogan;
    },
    Cancel() {
      this.dialogFormVisiblea = false;
      this.dialogFormVisible = false;
    },

    handleout(code, playerID) {
      let roles = this.$store.getters.roles
       if(roles==10000000||roles=='00000000'){
         console.log(this.$store.getters.roles);
         this.$message({
           type:'warning',
           message:'没有权限执行此操作'
         })
         return
       }
      let data = {
        method: Method.Method.MSG_AGENT_ACT_KICK_PLAYER,
        token: this.$store.getters.token,
        code: this.formInline.code,
        playerID: playerID,
      };
       this.$confirm("您将踢出该玩家, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
         posts(data)
        .then((res) => {       
              if (res.result == 0) {
                this.$message({
                  type: "success",
                  message: "踢出成功!",
                });
                this.onSubmit()
              } else {
                this.$message({
                  type: "info",
                  message: "移除失败",
                });
              }
            })
            .catch();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
     
    },
    onSubmit() {
      
      let data = {
        method: Method.Method.MSG_AGENT_ACT_PLAYER_LIST,
        token: this.$store.getters.token,
        code: this.formInline.code,
      };
      console.log(data,'code');
      posts(data).then((res) => {
        console.log(res,'6');
        if(res.result!=0){
           this.$message({
            type: 'error',
            message: Error.getErrorMessage(res.result),
          });
          return
        }
          this.tableData = res.list;
          this.total = res.list.length;
        })
        .catch();
    },
    onSubmits() {
      const that = this;
      let data = that.form;
      data.code = that.formInline.code;
      data.carton = that.image;
      posts(data).then((res) => {
        if(res.result == 0){
          this.onSubmit()
          this.dialogFormVisiblea = false;
           this.$message({
            type: "success",
            message: "修改成功!",
          });
        }else{
            this.$message({
            type: 'error',
            message: Error.getErrorMessage(res.result),
          });
    }
        })
        .catch();
    },
    handlesetting() {
      this.dialogFormVisible = true;
    },
  },
  created: function () {
   this.formInline.code = this.$store.getters.code
   this.onSubmit()
  },
};
</script>

<style lang="scss" scoped>
.pages {
  width: 100%;
  margin-top: 2%;
  display: flex;
  justify-content: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9 !important;
  font-size: 28px;
  color: #8c939d;
  width: 9rem;
  height: 9rem;
  line-height: 9rem;
  text-align: center;
}
.avatar {
  width: 9rem;
  height: 9rem;
  display: block;
}
</style>
